<template>
  <div class="hottype2">
    <p>{{itemdata.content}}</p>
    <div class="img_box">
      <van-image :src="item.image" v-for="(item, index) in itemdata.social_image.slice(0, 3)" :key="index" class="imgitem">
        <template v-slot:loading>
          <van-loading type="spinner" size="20" />
        </template>
      </van-image>
    </div>
    <div class="type2_bottom">
      <div>{{itemdata.author.nickname}}</div>
      <span>{{itemdata.all_comment_count}}评论</span>
      <span>{{itemdata.create_time}}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: ['itemdata']
}
</script>

<style lang="scss">
.hottype2{
  padding: .16rem 0 .16rem;
  border-bottom: .02rem solid #f0f0f0;
  &>p{
    max-height: .94rem;
    font-size: .32rem;
    color: #333333;
    font-weight: bold;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-bottom: .12rem;
  }
  .img_box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .imgitem{
      width: 2.24rem;
      height: 1.68rem;
    }
  }
  .type2_bottom{
    margin-top: .12rem;
    color: #999999;
    font-size: .24rem;
    display: flex;
    align-items: center;
    *{
      margin-right: .24rem;
    }
  }
}
</style>
